<script setup>
import calendarHeatmap from './calendarHeatmap.js'
import { onMounted, watch } from 'vue'

const props = defineProps({
  entries: {
    type: Array,
    default: () => []
  },
  colorRange: {
    type: Array,
    default: () => ['#D8E6E7', '#218380']
  },
  tooltipEnabled: {
    type: Boolean,
    default: true
  },
  locale: {
    type: [Object, String],
    default: () => 'en'
  },
  max: {
    type: Number,
    default: null
  },
  onClick: {
    type: Function,
    default: () => { }
  },
  selector: {
    type: String,
    default: 'heatmap'
  },
  width: {
    type: Number,
    default: 1000
  },
  height: {
    type: Number,
    default: 180
  },
  cellMargin: {
    type: Number,
    default: 2
  },
  cellRadius: {
    type: Number,
    default: 0
  }
})

let entries = props.entries
onMounted(renderHeatMap)
watch(() => entries, renderHeatMap)

function renderHeatMap() {

  calendarHeatmap.init().dataset(props.entries)
    .selector(`.${props.selector}`)
    .colorRange(props.colorRange)
    .tooltipEnabled(props.tooltipEnabled)
    .locale(props.locale)
    .width(props.width)
    .height(props.height)
    .cellMargin(props.cellMargin)
    .cellRadius(props.cellRadius)
    .max(props.max)
    .onClick(props.onClick)
    ()
}

</script>

<template>
  <div class="heatmap" :class="selector"></div>
  <div id="heatmap-tooltip"></div>
</template>

<style lang="scss">
.calendar-heatmap {
  background-color: #e7ece1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  width: 100%;
}

.heatmap-month-text {
  fill: #094e27;
  font-size: 14px;
  font-family: Helvetica, arial, 'Open Sans', sans-serif;
  font-weight: bold;
}

.heatmap-week-text {
  font-size: 12px;
  font-family: Helvetica, arial, 'Open Sans', sans-serif;
}

.heatmap-day-cell {

  stroke: #b2bbb5;
  stroke-width: 1px;

  &:hover {
    stroke: #1f7243;
    stroke-width: 1px;
  }
}

#heatmap-tooltip {
  visibility: hidden;
  position: absolute;
  z-index: 900;
  text-align: center;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  width: 150px;
  padding: 0.833em 1em;
  font-weight: normal;
  font-style: normal;
  border-radius: 0.2857rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;


  &::before {
    content: "";
    bottom: -0.325em;
    left: 50%;
    margin-left: -0.325em;
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    background: #ffffff;
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 1px 1px 0px 0px #b3b3b3;

    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
  }
}


.heatmap-tooltip-date {
  color: #094e27;
}

.heatmap-tooltip-total {
  font-weight: bold;
}
</style>